# Radio

<Subtitle>An easily stylable radio button component.</Subtitle>
<Meta
  name="description"
  content="A high-quality, unstyled React radio button component that is easy to style."
/>

import { DemoRadioHero } from './demos/hero';

<DemoRadioHero />

## Usage guidelines

- **Form controls must have an accessible name**: Radio group and individual Radio elements must have a meaningful label. Prefer using [`<Fieldset>`](/react/components/fieldset) and [`<Field>`](/react/components/field) to provide visible text labels and descriptions, or use the `aria-label` attribute as an alternative. See the [forms guide](/react/handbook/forms) for more on building form controls.

## Anatomy

Radio is always placed within Radio Group. Import the components and place them together:

```jsx title="Anatomy"
import { Radio } from '@base-ui-components/react/radio';
import { RadioGroup } from '@base-ui-components/react/radio-group';

<RadioGroup>
  <Radio.Root>
    <Radio.Indicator />
  </Radio.Root>
</RadioGroup>;
```

## API reference

### RadioGroup

Provides a shared state to a series of radio buttons. Renders a `<div>` element.

<Reference component="RadioGroup" />
<Reference component="Radio" parts="Root, Indicator" />
